<template>
  <div class="content-box">
    <nav-title title="个人信息修改审批" :routerLink="routerLink" />

    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value">{{emplid}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value">{{nameDisplay}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value">{{rsFullName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value">{{jobcodeDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">职等</label>
          <span class="value">{{rsJobLevel}}</span>
        </p>
      </div>
    </div>

    <div v-if="showEdit" class="regulations-box modify-box">

      <div class="title modify">修改信息</div>
      <p class="tips">以下仅列出新增、修改、删除的数据。</p>

      <div v-if="showPhoto" class="matters">
        <folding title="照片" :cModStauts="photoStatus" :is-add="false" @feedback="setIsShowType">
          <div class="detailed">
            <img :src="imgUrl" alt="">
          </div>
        </folding>
      </div>
      <div v-if="showModifyBasic" class="matters">
        <folding title="基本信息" :cModStauts="BaseInfoStatus" :is-add="false" @feedback="setIsShowType">
          <div class="normal-info">
            <div v-if="bsinfo.firstName != ' '" class="detailed-info-box">
              <div class="label">姓</div>
              <div class="label-value">
                {{ bsinfo.firstName }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.lastName != ' '" class="detailed-info-box">
              <div class="label">名</div>
              <div class="label-value">
                {{ bsinfo.lastName }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.nameAc != ' '" class="detailed-info-box">
              <div class="label">姓名拼音</div>
              <div class="label-value">
                {{ bsinfo.nameAc }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.rsUsedName != ' '" class="detailed-info-box">
              <div class="label">曾用名</div>
              <div class="label-value">
                {{ bsinfo.rsUsedName }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.sexValue != null" class="detailed-info-box">
              <div class="label">性别</div>
              <div class="label-value">
                {{ bsinfo.sexValue }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.countryValue != null" class="detailed-info-box">
              <div class="label">国籍</div>
              <div class="label-value">
                {{ bsinfo.countryValue }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.birthdate != null" class="detailed-info-box">
              <div class="label">出生日期</div>
              <div class="label-value">
                {{ bsinfo.birthdate }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.ethnicGrpCdValue != null" class="detailed-info-box">
              <div class="label">民族</div>
              <div class="label-value">
                {{ bsinfo.ethnicGrpCdValue }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.nativePlaceChn != ' '" class="detailed-info-box">
              <div class="label">籍贯</div>
              <div class="label-value">
                {{ bsinfo.nativePlaceChn }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.highestEducLvlValue != null" class="detailed-info-box">
              <div class="label">最高学历</div>
              <div class="label-value">
                {{ bsinfo.highestEducLvlValue }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.cSchool != ' '" class="detailed-info-box">
              <div class="label">毕业院校</div>
              <div class="label-value">
                {{ bsinfo.cSchool }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.cMajor != ' '" class="detailed-info-box">
              <div class="label">专业</div>
              <div class="label-value">
                {{ bsinfo.cMajor }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.startDtChn != null" class="detailed-info-box">
              <div class="label">参加工作日期</div>
              <div class="label-value">
                {{ bsinfo.startDtChn }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.rsWklifBgnDt != null" class="detailed-info-box">
              <div class="label">入本公司时间</div>
              <div class="label-value">
                {{ bsinfo.rsWklifBgnDt }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.cPosition != ' '" class="detailed-info-box">
              <div class="label">现在职称</div>
              <div class="label-value">
                {{ bsinfo.cPosition }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.politicalStaChnValue != null" class="detailed-info-box">
              <div class="label">政治面貌</div>
              <div class="label-value">
                {{ bsinfo.politicalStaChnValue }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.cDate != null" class="detailed-info-box">
              <div class="label">入党(团)日期</div>
              <div class="label-value">
                {{ bsinfo.cDate }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.cYesNo != ' '" class="detailed-info-box">
              <div class="label">有无驾照</div>
              <div class="label-value" v-if="bsinfo.cYesNo == 'Y'">
                有
              </div>
              <div class="label-value" v-if="bsinfo.cYesNo != 'Y'">
                无
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.rsPersHeight != ' '" class="detailed-info-box">
              <div class="label">身高(CM)</div>
              <div class="label-value">
                {{ bsinfo.rsPersHeight }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.rsPersWeight != ' '" class="detailed-info-box">
              <div class="label">体重(KG)</div>
              <div class="label-value">
                {{ bsinfo.rsPersWeight }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.rsBloodTypeValue != null" class="detailed-info-box">
              <div class="label">血型</div>
              <div class="label-value">
                {{ bsinfo.rsBloodTypeValue }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.rsHealthStatusValue != null" class="detailed-info-box">
              <div class="label">健康状况</div>
              <div class="label-value">
                {{ bsinfo.rsHealthStatusValue}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.marStatusValue != null" class="detailed-info-box">
              <div class="label">婚姻状况</div>
              <div class="label-value">
                {{ bsinfo.marStatusValue}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.cBearValue != null" class="detailed-info-box">
              <div class="label">生育状况</div>
              <div class="label-value">
                {{ bsinfo.cBearValue}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.nationalIdTypeValue != null" class="detailed-info-box">
              <div class="label">证件类型</div>
              <div class="label-value">
                {{ bsinfo.nationalIdTypeValue}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.nationalId != ' '" class="detailed-info-box">
              <div class="label">证件号码</div>
              <div class="label-value">
                {{ bsinfo.nationalId }}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.addresslong1 != ' '" class="detailed-info-box">
              <div class="label">户籍地址</div>
              <div class="label-value">
                {{ bsinfo.addresslong1}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.addresslong3 != ' '" class="detailed-info-box">
              <div class="label">家庭详细地址</div>
              <div class="label-value">
                {{ bsinfo.addresslong3}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.addresslong2 != ' '" class="detailed-info-box">
              <div class="label">现在居住地址</div>
              <div class="label-value">
                {{ bsinfo.addresslong2}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.cSendTypeValue != null && bsinfo.cAddress != ' '" class="detailed-info-box">
              <div class="label">指定送达地址</div>
              <div class="label-value">
                {{ bsinfo.cSendTypeValue}}
                <div>
                  <br> {{ bsinfo.cAddress}}
                </div>
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.phone1 != ' '" class="detailed-info-box">
              <div class="label">住宅电话</div>
              <div class="label-value">
                {{ bsinfo.phone1}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.phone != ' '" class="detailed-info-box">
              <div class="label">手机号码</div>
              <div class="label-value">
                {{ bsinfo.phone}}
              </div>
              <div class="icon"></div>
            </div>
            <div v-if="bsinfo.emailAddr != ' '" class="detailed-info-box">
              <div class="label">Email</div>
              <div class="label-value">
                {{ bsinfo.emailAddr}}
              </div>
              <div class="icon"></div>
            </div>
          </div>
        </folding>
      </div>

      <div v-if="showWork" class="matters">
        <folding title="入公司前工作经历" :is-add="false" @feedback="setIsShowType" where-is="theCompanyBefore">
          <div class="detailed">
            <!--点点代码块-->
            <div class="tip-time" v-for="(item, index) in expwVal">
              <div class="text-box" @click="toWorkExp(item)">
                <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
                <img class="star" v-else src="./image/star-blue.png" alt="">
                <div class="time-interval">
                  {{item.startDt}} - {{item.endDt}}
                  <span class="mode-status">{{item.cModStauts|modeStatus}}</span>
                </div>
                <div>
                  <span class="important">*</span>{{item.cCompany}}
                </div>
                <div>{{item.cPosition}}</div>
              </div>
              <div class="icon">></div>
            </div>
            <br>
          </div>
        </folding>
      </div>

      <div v-if="showEdu" class="matters">
        <folding title="教育经历" :is-add="false" @feedback="setIsShowType" where-is="education">
          <div class="detailed">
            <!--点点代码块-->
            <div class="tip-time" v-for="(item, index) in eduif">
              <div class="text-box" @click="toEdu(item)">
                <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
                <img class="star" v-else src="./image/star-blue.png" alt="">
                <div class="time-interval">
                  {{item.startDt}} - {{item.endDt}}
                  <span class="mode-status">{{item.cModStauts|modeStatus}}</span>
                </div>
                <div>
                  {{item.cSchool}}
                </div>
                <div>{{item.cMajor}}</div>
                <div>{{item.cEducitonValue}} | {{item.cDegreeValue}}</div>
              </div>
              <div class="icon">></div>
            </div>
            <br>
          </div>
        </folding>
      </div>

      <div v-if="showTrain" class="matters">
        <folding title="培训经历" :is-add="false" @feedback="setIsShowType" where-is="training">
          <div class="detailed">
            <!--点点代码块-->
            <div class="tip-time" v-for="(item, index) in traVal">
              <div class="text-box" @click="totrain(item)">
                <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
                <img class="star" v-else src="./image/star-blue.png" alt="">
                <div class="time-interval">
                  {{item.startDt}} - {{item.endDt}}
                  <span class="mode-status">{{item.cModStauts|modeStatus}}</span>
                </div>
                <div>
                  <span class="important">*</span>{{item.cCompany}}
                </div>
                <div>{{item.cDescr}}</div>
              </div>
              <div class="icon">></div>
            </div>
            <br>
          </div>
        </folding>
      </div>

      <div v-if="showZcgl" class="matters">
        <folding title="资格证书" :is-add="false" @feedback="setIsShowType" where-is="qualification">
          <div class="detailed">
            <!--点点代码块-->
            <div class="tip-time" v-for="(item, index) in zgzVal">
              <div class="text-box" @click="toquality(item)">
                <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
                <img class="star" v-else src="./image/star-blue.png" alt="">
                <div class="time-interval">
                  {{item.cDate}} [
                  <span class="important">{{item.cDate1}}到期</span> ]
                  <span class="mode-status">{{item.cModStauts|modeStatus}}</span>
                </div>
                <div>
                  <!-- {{item.cName}} {{item.cLevel}} -->
                </div>
                <div>签发单位：
                  <span class="important">*</span>{{item.cCompany}}</div>
              </div>

              <div class="icon">></div>
            </div>
            <br>
          </div>
        </folding>
      </div>

      <div v-if="showLangu" class="matters">
        <folding title="语言能力" :is-add="false" @feedback="setIsShowType" where-is="language">
          <div class="ability" v-for="item in lanVal">
            <div class="content" @click="toLang(item)">
              <div class="line">
                <div class="detailed-info-box">
                  <div class="label">语言</div>
                  <div class="label-value">
                    {{item.rsLangCdValue}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">证书名称</div>
                  <div class="label-value">
                    {{item.cDescr}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">掌握程度</div>
                  <div class="label-value">
                    {{item.cLangLvValue}}
                  </div>
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <span class="mode-status">{{item.cModStauts|modeStatus}}</span>
            <div class="icon">
              <img src="./image/u252.png" alt="">
            </div>
          </div>
        </folding>
      </div>

      <div v-if="showIt" class="matters">
        <folding title="计算机能力" :is-add="false" @feedback="setIsShowType" where-is="computer">
          <div class="ability" v-for="item in pcVal">
            <div class="content" @click="toComputer(item)">
              <div class="line">
                <div class="detailed-info-box">
                  <div class="label">技能名称</div>
                  <div class="label-value">
                    <!-- {{item.cName}} -->
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">证书名称</div>
                  <div class="label-value">
                    {{item.cDescr}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">掌握程度</div>
                  <div class="label-value">
                    {{item.cTechLvValue}}
                  </div>
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <span class="mode-status">{{item.cModStauts|modeStatus}}</span>
            <div class="icon">
              <img src="./image/u252.png" alt="">
            </div>
          </div>
        </folding>
      </div>

      <div v-if="showJc" class="matters">
        <folding title="奖惩情况" :is-add="false" @feedback="setIsShowType" where-is="rewardsAndPunishments">
          <div class="detailed">
            <!--点点代码块-->
            <div class="tip-time" v-for="(item, index) in jcVal">
              <div class="text-box" @click="toReward(item)">
                <img class="star" v-if="index%2 === 0" src="./image/star-green.png" alt="">
                <img class="star" v-else src="./image/star-blue.png" alt="">
                <div class="time-interval">
                  {{item.cDate}}
                  <span style="margin-left: 70px;color: black">{{item.rsJclbTypeValue}}</span>
                  <span class="mode-status">{{item.cModStauts|modeStatus}}</span>
                </div>
                <div>
                  <!-- {{item.cName}} -->
                </div>
                <div>颁发机构：{{item.cCompany}}</div>
              </div>
              <div class="icon">></div>
            </div>
            <br>
          </div>
        </folding>
      </div>

      <div v-if="showTc" class="matters">
        <folding title="个人特长及兴趣爱好" @feedback="setIsShowType" :is-add="false">
          <div class="ability">
            <div class="content">
              <div class="line">
                <div class="detailed-info-box">
                  <div class="label">个人特长</div>
                  <div class="label-value">
                    {{ bsinfo.cDescrlong }}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">兴趣爱好</div>
                  <div class="label-value">
                    {{ bsinfo.rsHobby }}
                  </div>
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <!-- <div class="icon">
              <img src="./image/u252.png" alt="">
            </div> -->
          </div>
        </folding>
      </div>

      <div v-if="showFamily" class="matters">
        <folding title="家庭情况" :is-add="false" @feedback="setIsShowType" where-is="family">
          <div class="ability" v-for="item in famVal">
            <div class="content" @click="toFamily(item)">
              <div class="line">
                <div class="detailed-info-box">
                  <div class="label">姓名</div>
                  <div class="label-value">
                    {{item.cName}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">性别</div>
                  <div class="label-value">
                    {{item.cFamilySexValue}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">关系</div>
                  <div class="label-value">
                    {{item.cRelationFamValue}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">工作单位</div>
                  <div class="label-value">
                    {{item.cCompany}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">职务</div>
                  <div class="label-value">
                    {{item.cPosition}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">联系电话</div>
                  <div class="label-value">
                    {{item.cPhone}}
                  </div>
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <span class="mode-status">{{item.cModStauts|modeStatus}}</span>
            <div class="icon">
              <img src="./image/u252.png" alt="">
            </div>
          </div>
        </folding>
      </div>

      <div v-if="showTact" class="matters">
        <folding title="紧急情况联系人" :cModStauts="tactStatus" @feedback="setIsShowType" :is-add="false">
          <div class="ability">
            <div class="content">
              <div class="line">
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>姓名</div>
                  <div class="label-value">
                    {{tcpVal.cName}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>性别</div>
                  <div class="label-value">
                    {{tcpVal.cTactPerSexValue}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>与本人关系</div>
                  <div class="label-value">
                    {{tcpVal.cRelationTactValue}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">工作单位</div>
                  <div class="label-value">
                    {{tcpVal.cCompany}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">办公电话</div>
                  <div class="label-value">
                    {{tcpVal.cPhone2}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>手机电话</div>
                  <div class="label-value">
                    {{tcpVal.cPhone1}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">住宅电话</div>
                  <div class="label-value">
                    {{tcpVal.cPhone}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">联系地址</div>
                  <div class="label-value">
                    {{tcpVal.cAddress}}
                  </div>
                  <div class="icon"></div>
                </div>
              </div>
            </div>
            <!--<div class="icon">-->
            <!--<img src="./image/u252.png" alt="">-->
            <!--</div>-->
          </div>
        </folding>
      </div>

      <div v-if="showBank" class="matters">
        <folding title="银行账号信息" :cModStauts="bankStatus" @feedback="setIsShowType" :is-add="false">
          <div class="ability">
            <div class="content">
              <div class="line">
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>开户银行名称</div>
                  <div class="label-value">
                    {{bankv}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">分/支行</div>
                  <div class="label-value">
                    {{bnkVal.rsBranchNm}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>银行账号</div>
                  <div class="label-value">
                    {{bnkVal.accountEcId}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>账户名称</div>
                  <div class="label-value">
                    {{bnkVal.accountName}}
                  </div>
                  <div class="icon"></div>
                </div>
              </div>
            </div>
          </div>
        </folding>
      </div>

      <div v-if="showSbg" class="matters">
        <folding title="社保公积金账户、个人档案信息" @feedback="setIsShowType" :is-add="false">
          <div class="ability" v-for="item in sbgVal">
            <div class="content">
              <div class="line">
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>账户类型</div>
                  <div class="label-value">
                    {{item.cDescr}}
                  </div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">未参加过社会保险/公积金</div>
                  <div class="label-value">
                    {{item.cYesNo | yesOrmno}}
                  </div>
                  <div class="icon"></div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>账号</div>
                  <div class="label-value">
                    {{item.gpcnAcountNum}}
                  </div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>原缴纳地</div>
                  <div class="label-value">
                    {{item.cAddress}}
                  </div>
                </div>
                <div class="detailed-info-box">
                  <div class="label">
                    <span class="important">*</span>状态</div>
                  <div class="label-value">
                    {{item.cPhfStatus}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ability">
            <div class="content">
              <div class="line">
                <div class="detailed-info-box">
                  <div class="label">本人档案所在地</div>
                  <div class="label-value">
                    {{ bsinfo.cArchiveAddr }}
                  </div>
                  <div class="icon"></div>
                </div>
              </div>
            </div>
          </div>
        </folding>
      </div>

      <div v-if="showQt" class="matters">
        <folding title="其他需要说明的情况" @feedback="setIsShowType" :is-add="false">
          <div class="otherexp">
            <div class="regulations" v-if="bsinfo.cDescrlong1 != ' '">
              <div class="otherexp-title">
                是否有过犯罪记录？
              </div>
              <div class="answer">
                {{ bsinfo.cDescrlong1 }}
              </div>
            </div>
            <div class="regulations" v-if="bsinfo.cDescrlong2 != ' '">
              <div class="otherexp-title">
                曾否因大病入院或患有特殊疾病？
              </div>
              <div class="answer">
                {{ bsinfo.cDescrlong2 }}
              </div>
            </div>
            <div class="regulations" v-if="bsinfo.cDescrlong3 != ' '">
              <div class="otherexp-title">
                是否对其他公司负竞业限制义务？
              </div>
              <div class="answer">
                {{ bsinfo.cDescrlong3 }}
              </div>
            </div>
            <div class="regulations" v-if="bsinfo.cDescrlong4 != ' '">
              <div class="otherexp-title">
                是否曾在本集团任职或建立过劳动关系？
              </div>
              <div class="answer">
                {{ bsinfo.cDescrlong4 }}
              </div>
            </div>
            <div class="regulations" v-if="bsinfo.cDescrlong5 != ' '">
              <div class="otherexp-title">
                其他补充说明
              </div>
              <div class="answer">{{ bsinfo.cDescrlong5 }}</div>
            </div>
          </div>
        </folding>
      </div>

    </div>

    <!-- 流程图 -->
    <div class="regulations-box">
      <div class="title">流程图</div>
      <!-- 流程图 -->
      <v-flow-charts :transNum="cTransactionNbr"></v-flow-charts>
    </div>

    <!-- 审批意见 -->
    <div class="regulations-box">
      <div class="info-label">审批意见</div>
      <div class="info-label-text">
        <textarea v-if="approved == '0'" placeholder="请在这里输入..." rows="5" v-model="cComments"></textarea>
        <textarea v-else="" readonly rows="5" v-model="cComments"></textarea>
      </div>
    </div>

    <div style="height: 50px"></div>
    <!-- 底部按钮 -->
    <div v-if="approved == '0'">
      <operation-btn @doOperate="doOperate" :cApprovalSw="cApprovalSw" :cDenySw="cDenySw" :cPushbackAllSw="cPushbackAllSw" :cAddSw="cAddSw"></operation-btn>
    </div>

  </div>
</template>

<script>
import {
  getProcessPerson,
  getCompensateProcess,
  getQrmsg,
  getEdu,
  getDicItem,
  getPWork,
  getPTrain,
  getLan,
  getPcAb,
  getjc,
  getFam,
  getTacp,
  getBnkacc,
  getPzcgl,
  getsbg,
  getCountry,
  getNation,
  getBank
} from '../../api/api'
import Folding from './common/Folding'
import { getCompensateApprove } from '../../api/api'
import { json2Form } from '../../util/http'
import operationBtn from './common/operationBtn'
import vFlowCharts from '../formalStaff/common/flowChart'
export default {
  components: {
    Folding,
    operationBtn,
    vFlowCharts
  },
  created() {
    this.cTransactionNbr = this.$route.query.cTransactionNbr
    this.approved = this.$route.query.approved
    if (this.$route.query.approved == '0') {
      this.routerLink = 'TodoList'
    } else if (this.$route.query.approved == '1') {
      this.routerLink = 'DoneList'
    } else {
      this.routerLink = 'MyApplication'
    }
    //获取个人信息修改审批
    this.getProcessPersonInfo()
  },
  mounted() {},
  data() {
    return {
      //返回需要跳转到哪个页面
      routerLink: '',
      //是否从已审批页面跳转过来
      approved: '0',

      emplid: '',
      nameDisplay: '',
      deptDescr: '',
      rsFullName: '',
      jobcodeDescr: '',
      rsJobLevel: '',

      cWfType: '',
      cTransactionNbr: '',

      cComments: '',
      bsinfo: '',
      foldingIndex: -1,
      isFirst: false,
      foldings: [],
      eduif: [],
      sexVal: [],
      expwVal: [],
      eduVal: [],
      degVal: [],
      traVal: [],
      lanVal: [],
      lanlvVal: [],
      lantpVal: [],
      pcVal: [],
      pclvVal: [],
      jcVal: [],
      jctpVal: [],
      famVal: [],
      tcpVal: [],
      bankv: '',
      bnkVal: [],
      zgzVal: [],
      sbgVal: [],
      perNo: {
        emplid: '10070226'
      },
      showEdit: false,
      showModifyBasic: false,
      showPhoto: false,
      showWork: false,
      showEdu: false,
      showTrain: false,
      showZcgl: false,
      showLangu: false,
      showIt: false,
      showJc: false,
      showFamily: false,
      showTact: false,
      showBank: false,
      showSbg: false,
      showTc: false,
      showQt: false,
      cApprovalSw: '',
      cDenySw: '',
      cPushbackAllSw: '',
      cAddSw: '',
      BaseInfoStatus: '',
      tactStatus: '',
      bankStatus: '',
      photoStatus: ''
    }
  },
  methods: {
    getProcessPersonInfo() {
      let params = {
        cTransactionNbr: this.cTransactionNbr
      }
      getProcessPerson(params)
        .then(res => {
          if (res && res.retCode === '000000') {
            this.emplid = res.retData.emplid
            this.nameDisplay = res.retData.nameDisplay
            this.deptDescr = res.retData.deptDescr
            this.rsFullName = res.retData.rsFullName
            this.jobcodeDescr = res.retData.jobcodeDescr
            this.rsJobLevel = res.retData.rsJobLevel

            this.cWfType = res.retData.cWfType
            this.cApprovalSw = res.retData.cApprovalSw
            this.cDenySw = res.retData.cDenySw
            this.cPushbackAllSw = res.retData.cPushbackAllSw
            this.cAddSw = res.retData.cAddSw
            if (res.retData.PereditTiles != null) {
              this.showModifyBasic = true
              this.BaseInfoStatus = res.retData.PereditTiles.cModStatus
              if (res && res.retCode === '000000') {
                this.bsinfo = res.retData.PereditTiles
                if (
                  this.bsinfo.cDescrlong != ' ' ||
                  this.bsinfo.rsHobby != ' '
                ) {
                  this.showTc = true
                }
                if (
                  this.bsinfo.cDescrlong1 != ' ' ||
                  this.bsinfo.cDescrlong2 != ' ' ||
                  this.bsinfo.cDescrlong3 != ' ' ||
                  this.bsinfo.cDescrlong4 != ' ' ||
                  this.bsinfo.cDescrlong5 != ' '
                ) {
                  this.showQt = true
                }
              }
            }
            // 照片数据
            if (res.retData.emplPhoto != null) {
              this.showPhoto = true
              this.photoStatus = res.retData.emplPhoto.cModStauts
              if (res && res.retCode === '000000') {
                this.imgUrl =
                  this.$store.state.picRootURL + res.retData.emplPhoto.imgUrl
              }
            }
            // 工作经历修改数据
            if (res.retData.editWorkHi.length != 0) {
              this.showWork = true
              if (
                Object.prototype.toString.call(res.retData.editWorkHi) ===
                '[object Array]'
              ) {
                // this.expwVal = res.retData.editWorkHi[0]
                this.expwVal.push(...res.retData.editWorkHi)
              } else {
                // this.expwVal = res.retData.editWorkHi
                this.expwVal.push(res.retData.editWorkHi)
              }
            }
            // 教育经历修改数据
            if (res.retData.editEdus.length != 0) {
              this.showEdu = true
              if (
                Object.prototype.toString.call(res.retData.editEdus) ===
                '[object Array]'
              ) {
                this.eduif.push(...res.retData.editEdus)
              } else {
                this.eduif.push(res.retData.editEdus)
              }
            }
            // 培训经历修改数据
            if (res.retData.editTrain.length != 0) {
              this.showTrain = true
              if (
                Object.prototype.toString.call(res.retData.editTrain) ===
                '[object Array]'
              ) {
                this.traVal.push(...res.retData.editTrain)
              } else {
                // this.traVal = res.retData.editTrain
                this.traVal.push(res.retData.editTrain)
              }
            }
            // 资格证书修改数据
            if (res.retData.editZcgl.length != 0) {
              this.showZcgl = true
              if (
                Object.prototype.toString.call(res.retData.editZcgl) ===
                '[object Array]'
              ) {
                this.zgzVal.push(...res.retData.editZcgl)
              } else {
                this.zgzVal.push(res.retData.editZcgl)
              }
            }
            // 语言能力修改数据
            if (res.retData.editEmpLangs.length != 0) {
              this.showLangu = true
              if (
                Object.prototype.toString.call(res.retData.editEmpLangs) ===
                '[object Array]'
              ) {
                this.lanVal.push(...res.retData.editEmpLangs)
              } else {
                this.lanVal.push(res.retData.editEmpLangs)
              }
            }
            // 计算机能力修改数据
            if (res.retData.editItTech.length != 0) {
              this.showIt = true
              if (
                Object.prototype.toString.call(res.retData.editItTech) ===
                '[object Array]'
              ) {
                this.pcVal.push(...res.retData.editItTech)
              } else {
                this.pcVal.push(res.retData.editItTech)
              }
            }
            // 奖惩情况修改数据
            if (res.retData.editJcxx.length != 0) {
              this.showJc = true
              if (
                Object.prototype.toString.call(res.retData.editJcxx) ===
                '[object Array]'
              ) {
                this.jcVal.push(...res.retData.editJcxx)
              } else {
                this.jcVal.push(res.retData.editJcxx)
              }
            }
            // 家庭情况修改数据
            if (res.retData.editFamily.length != 0) {
              this.showFamily = true
              if (
                Object.prototype.toString.call(res.retData.editFamily) ===
                '[object Array]'
              ) {
                this.famVal.push(...res.retData.editFamily)
              } else {
                this.famVal.push(res.retData.editFamily)
              }
            }
            // 紧急联系人修改数据
            if (res.retData.editTactPer != null) {
              this.showTact = true
              this.tactStatus = res.retData.editTactPer.cModStauts
              if (res && res.retCode === '000000') {
                this.tcpVal = res.retData.editTactPer
              }
            }
            // 银行账号修改数据
            if (res.retData.editBank != null) {
              this.showBank = true
              this.bankStatus = res.retData.editBank.cModStauts
              if (res && res.retCode === '000000') {
                this.bnkVal = res.retData.editBank
                this.getBanklb(res.retData.editBank.bankCd)
              }
            }
            // 社保公积金修改数据
            if (res.retData.editSocial.length != 0) {
              this.showSbg = true
              // if (
              //   Object.prototype.toString.call(res.retData.editSocial) ===
              //   '[object Array]'
              // ) {
              //   this.sbgVal.push(...res.retData.editSocial)
              // } else {
              //   this.sbgVal.push(res.retData.editSocial)
              // }
            }
            // 判断是否整个修改信息都不显示
            if (
              this.showModifyBasic ||
              this.showPhoto ||
              this.showWork ||
              this.showEdu ||
              this.showTrain ||
              this.showZcgl ||
              this.showLangu ||
              this.showIt ||
              this.showJc ||
              this.showFamily ||
              this.showTact ||
              this.showBank ||
              this.showSbg ||
              this.showTc ||
              this.showQt
            ) {
              this.showEdit = true
            }
          } else {
            this.$vux.alert.show({
              title: '',
              content: res.retMsg
            })
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
    },
    doOperate(actionType) {
      //同意审批
      let params = {
        c_WF_TYPE: this.cWfType,
        c_TRANSACTION_NBR: this.cTransactionNbr, //流程编号
        c_ACTION_TYPE: actionType,
        c_COMMENTS: this.cComments
      }

      if (actionType == 'AddStep') {
        this.$router.push({
          name: 'Visa',
          params: {
            c_TRANSACTION_NBR: this.cTransactionNbr,
            c_WF_TYPE: this.cWfType,
            c_COMMENTS: this.cComments,
            c_Link: 'InfoModify'
          }
        })
      } else {
        getCompensateApprove(json2Form(params))
          .then(res => {
            if (res && res.retCode === '000000') {
              let _this = this
              this.$vux.alert.show({
                title: '成功',
                content: '操作成功',
                onHide() {
                  _this.$router.push('/TodoList')
                }
              })
            } else {
              this.$vux.alert.show({
                title: '',
                content: res.retMsg
              })
            }
          })
          .catch(res => {
            this.$vux.alert.show({
              title: '警告',
              content: '网络异常，请稍后重试'
            })
          })
      }
    },
    setIsShowType(title) {
      if (this.foldingIndex < 0) {
        if (this.isFirst) {
          this.foldings[0].isShow = true
          this.isFirst = false
        }
      } else {
        this.foldings[this.foldingIndex].isShow = false
      }
      this.foldingIndex = this.foldings.findIndex(value => value.isShow)
    },
    //银行
    getBanklb(valbnk) {
      getBank().then(res => {
        res.retData.forEach(val => {
          if (val.bankCd == valbnk) {
            this.bankv = val.descrshort
          }
        })
      })
    },
    //工作经历
    toWorkExp(item) {
      this.$router.push({
        name: 'ptheCompanyBefore',
        params: {
          workexp: item
        }
      })
    },
    //教育经历
    toEdu(item) {
      this.$router.push({
        name: 'peducation',
        params: {
          edult: item
        }
      })
    },
    //培训经历
    totrain(item) {
      this.$router.push({
        name: 'ptraining',
        params: {
          tralt: item
        }
      })
    },
    //资格证书
    toquality(item) {
      this.$router.push({
        name: 'pqualification',
        params: {
          qualt: item
        }
      })
    },
    //语言能力
    toLang(item) {
      this.$router.push({
        name: 'planguage',
        params: {
          lang: item
        }
      })
    },
    //跳转计算机
    toComputer(item) {
      this.$router.push({
        name: 'pcomputer',
        params: {
          coup: item
        }
      })
    },
    //奖惩
    toReward(item) {
      this.$router.push({
        name: 'prewardsAndPunishments',
        params: {
          rewd: item
        }
      })
    },
    //家庭
    toFamily(item) {
      this.$router.push({
        name: 'pfamily',
        params: {
          fam: item
        }
      })
    },
    tosocail(item) {
      this.$router.push({
        name: 'psocsec',
        params: {
          socvl: item
        }
      })
    }
  },
  filters: {
    yesOrmno(val) {
      if (val == 'Y') {
        return '是'
      } else {
        return '否'
      }
    },
    modeStatus(val) {
      if (val == 'C') {
        return '新增'
      } else if (val == 'U') {
        return '修改'
      } else if (val == 'D') {
        return '删除'
      } else {
        return ''
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss">
.tips {
  color: #bbb;
  text-align: left;
  margin: 10px;
}
.modify {
  margin-bottom: 10px;
}
@import '../../styles/staff.scss';
// @import './style';
.modify-box {
  font-size: 14px;
  margin-bottom: 50px;
  padding: 0 10px;
  .title {
    font-size: 20px;
    font-weight: 900;
    color: #25262d;
  }
  .important {
    color: red;
  }
  .normal-info {
    .detailed-info-box {
      display: flex;
      margin-bottom: 15px;
      .label {
        flex: 2;
        text-align: right;
      }
      .label-value {
        flex: 4;
        text-align: left;
        margin-left: 10px;
      }
      .icon {
        flex: 1;
      }
    }
  }
  .detailed-info-box {
    display: flex;
    margin-bottom: 15px;
    .label {
      flex: 8;
      text-align: right;
    }
    .label-value {
      flex: 12;
      text-align: left;
      margin-left: 10px;
    }
    .icon {
      flex: 1;
    }
  }
  .matters {
    .otherexp {
      padding: 0 30px;
      .regulations {
        text-align: left;
        border-bottom: 1px #999 solid;
        line-height: 10px;
        .otherexp-title {
          font-size: 13px;
          margin: 18px 0;
          font-weight: 900;
        }
        .answer {
          margin-bottom: 10px;
        }
      }
    }
    .detailed {
      align-items: center;
      padding-left: 15px;
      padding-top: 10px;
      .tip-time {
        text-align: left;
        padding: 0 0 20px 30px;
        border-left: 1px darkcyan solid;
        line-height: 20px;
        position: relative;
        display: flex;
        .time-interval {
        }
        .text-box {
          flex: 5;
          .star {
            position: absolute;
            left: -6px;
            top: 0px;
          }
        }
        .icon {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          color: #888888;
        }
      }
    }
    .ability {
      display: flex;
      align-items: center;
      .content {
        width: 80%;
        align-items: center;
        display: table;
        vertical-align: middle;
        margin-bottom: 0;
        .detailed-info-box {
          align-items: flex-start;
          line-height: 15px;
          vertical-align: center;
        }
      }
      .icon {
        flex: 1;
        img {
          width: 18px;
        }
      }
    }
  }
  .sub-btn-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 30px;
    .sub-save {
      width: 100px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #07bc4b;
      color: white;
      box-shadow: 3px 3px 5px #888888;
    }
    .sub-btn {
      width: 100px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f1c631;
      color: white;
      box-shadow: 3px 3px 5px #888888;
    }
    .sub-detail {
      width: 50%;
      height: 32px;
      display: flex;
      border-radius: 5px;
      align-items: center;
      justify-content: center;
      background-color: #07bc4b;
      color: white;
      box-shadow: 3px 3px 5px #888888;
    }
  }

  .mode-status {
    color: #e91010;
    float: right;
    font-size: 13px;
  }

  // .shebao{
  //   .content{
  //     width: 90%;
  //   }
  // }
}
</style>
